<template>
  <div class="hello">
    <ul>
      <li v-for="item in message" class="item" :class="{'item-me': item.input, 'item-monkey': item.output}">
        <i class="icon icon-me" :class="{'icon-me': item.input, 'icon-monkey': item.output}"></i>
        <span class="content">{{item.content}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import EventBus from '../lib/eventbus';
export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      message: [
      ]

    }
  },
  methods: {
     doScroll () {
       this.$nextTick(function(){
         var div = document.getElementById('left');
         div.scrollTop = div.scrollHeight;
       });
     }
  },

  created () {
    EventBus.$on('ws-data', (msg) => {
      this.message.push({
        input: true,
        content: msg
      });
      this.doScroll();
    });

    EventBus.$on('chat-response', (msg) => {
      let message = {
        output: true,
        content: 'Typing...' 
      };
      this.message.push(message);
      setTimeout(() => {
        message.content = msg;
      }, 800);
      this.doScroll();
    });
  }
  
};
</script>

<style lang="less">
ul, li {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.hello {
  padding-bottom: 100px;
}
.item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  &.item-me {
    text-align: left;
  }
  &.item-monkey {
    flex-direction: row-reverse;
  }
  .content {
    padding: 0px 20px;
  }
}
.icon {
  display: block;
  width: 30px;
  height: 30px;
  background-size: cover;
}
.icon-me {
  background-image: url('../images/man.png');  
}
.icon-monkey {
  background-image: url('../images/monkey100.png');
}
</style>
